<script>
import InstitutionSelect from '@/components/institutionSelect/institutionSelect.vue'
import { mapState } from 'vuex'
import ChauffeurInfo from '@/views/employee/chauffeur/components/chauffeurInfo/chauffeurInfo.vue'

export default {
  name: 'chauffeur',
  components: { ChauffeurInfo, InstitutionSelect },
  data() {
    return {
      pageParams: {
        page: 1,
        pageSize: 10,
        phone: undefined,
        account: undefined,
        agentId: undefined
      },
      loading: false,
      placeholder: '请选择所属机构',
      drawer: false,
      chauffeurDetail: {},
      vehicleIds: [],
      /* 司机ID */
      driverId: ''

    }
  },
  methods: {
    /*
    *
    * 获取司机分页数据的回调函数
    *  */
    async fetchChauffeur() {
      try {
        this.loading = true
        await this.$store.dispatch('chauffeurStore/fetchChauffeurAction', this.pageParams)
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    },
    /*
    * 获取机构ID
    *  */
    nodeClick({ id, name }) {
      console.log(id, name)
      this.pageParams.agentId = id
      this.placeholder = name
    },
    /*
    * 点击搜索按钮的回调函数
    *  */
    handleSearch() {
      this.pageParams.page = 1
      this.fetchChauffeur()
    },
    /*
    * 重置按钮的回调函数
    *  */
    handleReset() {
      this.pageParams = {
        page: 1,
        pageSize: 10,
        phone: undefined,
        account: undefined,
        agentId: undefined
      }
      this.placeholder = '请选择所属机构'
    },
    /*
    * pageSize变化的回调
    *  */
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.fetchChauffeur()

    },
    /*
    * page变化的回调
    *  */
    handleCurrentChange(page) {
      this.pageParams.page = page
      this.fetchChauffeur()
    },
    /*
    *
    * 获取所有车辆的回调函数
    *  */
    async fetchVehicleAll() {
      try {
        await this.$store.dispatch('chauffeurStore/fetchVehicleAllAction')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    *
    * 删除绑定车辆的回调函数
    *  */
    handleDelete(row) {
      this.$store.commit('chauffeurStore/deleteVehicle', row.id)
    },
    /*
    *
    * 分配车辆的回调函数
    *  */
    async handleDistribution(row) {
      const confirm = await this.$confirm('分车辆需满条件:1.信息完善 2.已设置排班 3.状态禁用', '分配车辆', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
      if (confirm === 'cancel') return
      this.drawer = true
      this.chauffeurDetail = row
      this.driverId = row.id
      try {
        await this.$store.dispatch('chauffeurStore/fetchChauffeurDetailAction', row.userId)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    *确认绑定车辆的回调函数
    *  */
    async handleBindVehicleSunmit() {
      try {
        const bindResult = await this.$store.dispatch('chauffeurStore/bindVehicleAction', { driverId: this.driverId, truckId: this.bindVehicleList.map(item => item.id) })
        this.drawer = false
        this.$message.success(bindResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    * 抽屉组件关闭时候的回调
    *  */
    closeDrawer(){
      this.$store.commit("chauffeurStore/clearVehicle")
      this.vehicleIds=[]
    }
  },
  computed: {
    ...mapState('chauffeurStore', ['chauffeurList', 'counts', 'vehicleAllList', 'bindVehicleList'])
  },

  watch: {
    vehicleIds(newValue) {
      this.$store.commit('chauffeurStore/pushVehicle', newValue[newValue.length - 1])
    }
  },

  mounted() {
    this.fetchChauffeur()
    this.fetchVehicleAll()
  }
}
</script>

<template>
  <div class="chauffeur">
    <el-card shadow="never" class="top">
      <el-form inline :model="pageParams">
        <el-form-item label="司机账号:">
          <el-input placeholder="请输入司机账号" v-model="pageParams.account"></el-input>
        </el-form-item>
        <el-form-item label="司机姓名:">
          <el-input placeholder="请输入司机姓名" v-model="pageParams.name"></el-input>
        </el-form-item>
        <el-form-item label="司机手机号:">
          <el-input placeholder="请输入司机手机号" v-model="pageParams.phone"></el-input>
        </el-form-item>
        <el-form-item label="所属机构:">
          <institution-select :placeholder="placeholder" @nodeClick="nodeClick"></institution-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" class="bottom" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255)">
      <el-table stripe border :data="chauffeurList" :header-cell-style="{background:'#f4f6f8',color:'#969393'}">
        <el-table-column type="index" label="序号" width="120px" align="center"></el-table-column>
        <el-table-column prop="account" label="司机账号" align="center"></el-table-column>
        <el-table-column prop="name" label="司机姓名" align="center"></el-table-column>
        <el-table-column prop="mobile" label="司机电话" align="center"></el-table-column>
        <el-table-column prop="id" label="司机ID" align="center" width="200px"></el-table-column>
        <el-table-column label="关联车辆" align="center">
          <template #default="{row}">{{ row.truck.licensePlate }}</template>
        </el-table-column>
        <el-table-column label="所属机构" align="center">
          <template #default="{row}">{{ row.agency.name }}</template>
        </el-table-column>
        <el-table-column label="工作状态" align="center">
          <template #default="{row}">{{ row.workStatus === 0 ? '休息' : '上班' }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button type="text" @click="$router.push({path:'/chauffeur-detail',query:{id:row.userId}})">详情</el-button>
            <el-button type="text" @click="handleDistribution(row)">分配车辆</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParams.page" :page-sizes="[2, 3, 4, 10]" :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="counts" background></el-pagination>
    </el-card>

    <el-drawer title="分配车辆" :visible.sync="drawer" @close="closeDrawer">
      <el-scrollbar class="scrollbar">
        <chauffeur-info :chauffeur-info="chauffeurDetail"></chauffeur-info>
        <el-form label-width="80px" inline>
          <el-form-item label="配置车辆">
            <el-select collapse-tags multiple placeholder="请选择需要配置的车辆" v-model="vehicleIds">
              <el-option v-for="(item) in vehicleAllList" :value="item.id" :label="item.licensePlate" :id="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table  size="small" border stripe :header-cell-style="{background:'#f4f6f8',color:'#969393'}" :data="bindVehicleList">
          <el-table-column type="index" label="序号" width="50px" align="center"></el-table-column>
          <el-table-column prop="licensePlate" label="车牌号" align="center"></el-table-column>
          <el-table-column prop="status" label="车辆状态" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{row}">
              <el-button type="text">查看</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="btn-box">
          <el-button>取消</el-button>
          <el-button type="primary" @click="handleBindVehicleSunmit">确认</el-button>
        </div>
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
.chauffeur {
  padding: 20px;

  .top {

    .el-form-item {
      width: 380px;

      .el-input {
        width: 140%;
      }
    }
  }

  .bottom {
    margin-top: 10px;

    .el-table {
      margin: 10px 0;
    }

    .el-pagination {
      display: flex;
      justify-content: center;
    }
  }

  ::v-deep .el-drawer__body {
    padding: 10px !important;
  }

  ::v-deep .el-drawer__header {
    font-size: 17px;
    font-weight: 600;
    background-color: #f3f4f7;
    padding: 10px;
  }

  .el-select {
    width: 250px;
  }

  .scrollbar {
    height: 600px;

    .btn-box {
      display: flex;
      justify-content: center;
      margin: 10px 0;
    }
  }


}
</style>
